<!-- 需求列表  -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb">
    <template #buts>
      <a-button type="primary" @click="WarehouseAdd">
        <template #icon>
          <icon-plus />
        </template>
        新建仓库
      </a-button>
    </template>
  </pageHeader>
  <div class="search-box">
    <div>
      <a-space>
        <a-input-search
          v-model="nameSearch"
          :style="{ width: '220px' }"
          placeholder="仓库名称"
          @Search="Search"
          search-button
        />
        <a-input-search
          v-model="NumberSearch"
          :style="{ width: '220px' }"
          placeholder="仓库编号"
          @Search="Search"
          search-button
        />
        <a-button type="outline" @click="resetting">
          <template #icon> <icon-refresh /> </template>重置</a-button
        >
      </a-space>
    </div>

    <div>
      <a-space>
        <a-button status="success">
          <template #icon>
            <icon-download />
          </template>
          <template #default>导入</template>
        </a-button>
        <a-button status="warning" @click="getDemandDeriveData">
          <template #icon>
            <icon-upload />
          </template>
          <template #default>导出</template>
        </a-button>
      </a-space>
    </div>
  </div>
  <tableTurn
    style="padding: 0px 10px"
    :tableData="getDemandAll"
    :args="args"
    ref="tableRef"
  >
    <a-table-column
      :width="200"
      title="仓库名称"
      data-index="name"
      align="center"
    />
    <a-table-column
      :width="200"
      title="仓库编号"
      data-index="warehouseNumber"
      align="center"
    />
    <a-table-column
      :width="200"
      title="负责人"
      data-index="headName"
      align="center"
    />
    <a-table-column
      :width="300"
      title="所在位置"
      data-index="location"
      align="center"
    />
    <a-table-column
      title="仓库面积"
      data-index="warehouseArea"
      :width="200"
      align="center"
    />
    <template #cell="{ record }"
      ><div>{{ record.warehouseArea }}平方</div></template
    >
    <a-table-column :width="200" title="状态" data-index="state" align="center"
      ><template #cell="{ record }">
        <div
          :class="record.state === 1 ? 'state-item-Y' : 'state-item-N'"
          class="state-item"
        >
          {{ record.state === 1 ? '是' : '否' }}
        </div></template
      ></a-table-column
    >
    <a-table-column
      :width="300"
      title="备注"
      data-index="remark"
      align="center"
    ></a-table-column>
    <a-table-column :width="150" fixed="right" title="操作" align="center">
      <template #cell="{ record }">
        <a-space>
          <a-tooltip content="新增">
            <IconFont
              type="icon-add-def"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="addReservoir(record, 1)"
            />
          </a-tooltip>
          <a-tooltip content="编辑">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="editReservoir(record)"
            />
          </a-tooltip>
          <a-tooltip content="删除">
            <a-popconfirm
              content="确认删除？"
              type="error"
              @ok="del(record.id)"
            >
              <IconFont
                type="icon-delete"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </a-space>
      </template>
    </a-table-column>
  </tableTurn>
  <AddWarehouse
    v-model:visible="modelVisible"
    :title="addTitie"
    :formData="WarehouseForm"
    @addWarehouseForm="addWarehouseForm"
  ></AddWarehouse>
</template>

<script lang="ts" setup>
  import { reactive, onMounted, ref, nextTick, watchEffect } from 'vue';
  import {
    GetWarehouseAll,
    postWarehouse,
    putWarehouse,
    delWarehouse,
  } from '@/api/inventory-management/warehouse-management/warehouse-list/index';
  import { useRouter } from 'vue-router';
  import dayjs from 'dayjs';
  import { Blob } from 'buffer';
  import AddWarehouse from './components/add-warehouse.vue';

  const router = useRouter();
  const NumberSearch = ref();
  const nameSearch = ref();
  const state = ref();
  const StateVal = ref();
  const WarehouseForm = ref();
  const modelTitle = ref('新增库区');
  // 表格配置
  const args = reactive({
    stripe: false,

    scroll: {
      y: 2000,
      x: 500,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });

  const createId = ref();
  const modelVisible = ref(false);
  const tableRef = ref();
  const breadCrumb: string[] = ['库存管理', '仓库管理', '仓库列表'];
  const title: string = '仓库列表';
  let msg = reactive<any>({});
  // 获取需求列表
  const getDemandAll = async (page: any) => {
    try {
      let msg: any = {};
      if (NumberSearch.value) msg.number = NumberSearch.value;
      if (nameSearch.value) msg.name = nameSearch.value;
      if (StateVal.value) msg.state = StateVal.value;
      let res = await GetWarehouseAll({ ...page, ...msg });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const resetting = () => {
    NumberSearch.value = '';
    nameSearch.value = '';
    StateVal.value = '';
    tableRef.value.refreshPaging();
    tableRef.value.loadData();
  };
  // const del = async (id: number) => {
  //   await deleteDemandForm({ id });
  //   tableRef.value.loadData();
  // };

  // const getDemandDeriveData = async () => {
  //   GetDemandDeriveExcel();
  // };
  const addTitie = ref();
  const WarehouseAdd = () => {
    modelVisible.value = true;
    addTitie.value = '新建仓库';
    state.value = 1;
    WarehouseForm.value = {
      name: '',
      warehouseNumber: '',
      warehouseType: undefined,
      location: '',
      warehouseArea: undefined,
      remark: '',
      headId: undefined,
      state: 1,
      mark: 1,
    };
  };

  const addReservoir = (val: any, key: number) => {
    modelVisible.value = true;
    addTitie.value = '新建库区';
    WarehouseForm.value = {
      name: '',
      warehouseNumber: '',
      warehouseType: undefined,
      location: '',
      warehouseArea: undefined,
      remark: '',
      headId: undefined,
      state: 1,
      mark: 1,
      pid: val.id,
    };
  };

  const editReservoir = (val: any) => {
    WarehouseForm.value = val;
    addTitie.value = '编辑库区';
    modelVisible.value = true;
  };

  const addWarehouseForm = async (data: any) => {
    if (state.value === 1) {
      await postWarehouse({ ...data });
    } else {
      await putWarehouse({ ...data });
    }
    tableRef.value.loadData();
  };

  watchEffect(() => {
    if (!modelVisible.value) {
      WarehouseForm.value = {
        name: '',
        warehouseNumber: '',
        warehouseType: undefined,
        location: '',
        warehouseArea: undefined,
        remark: '',
        headId: undefined,
        state: 1,
        mark: 1,
      };
    }
  });

  const del = async (id: number) => {
    await delWarehouse({ id });
    tableRef.value.loadData();
  };

  const Search = () => {
    tableRef.value.refreshPaging();
    tableRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .search-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    margin-top: -7px;
  }
  .use-state {
    display: flex;
    justify-content: center;
    text-align: center;
    .cycle {
      position: relative;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      content: '';
      display: inline-block;
      top: 3px;
      right: 10px;
    }
  }

  .greyColor {
    color: #c9cdd4;
  }
  .greyColor-cycle {
    background-color: #c9cdd4;
  }

  // 审核中、执行中
  .blueColor {
    color: #156dff;
  }
  .blueColor-cycle {
    background-color: #156dff;
  }

  // 已通过
  .greenColor {
    color: #31c273;
  }
  .greenColor-cycle {
    background-color: #31c273;
  }

  // 不通过
  .redColor {
    color: #f53f3f;
  }
  .redColor-cycle {
    background-color: #f53f3f;
  }

  .state-item {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .state-item-Y {
    width: 30px;
    height: 30px;
    font-size: 12px;
    border: 1px solid rgba(148, 191, 255, 1);
    background-color: rgba(232, 243, 255, 1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3d7eff;
  }
  .state-item-N {
    color: #f53f3f;
    width: 30px;
    height: 30px;
    font-size: 12px;
    border: 1px solid rgba(251, 172, 163, 1);
    background-color: rgba(255, 236, 232, 1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
